<template lang="pug">
  div.schedule
    div.schedule-title
      span(:class="{'check-title':check===1}" @click="check=1") 全部
      span(:class="{'check-title':check===2}" @click="check=2") 篮球
      span(:class="{'check-title':check===3}" @click="check=3") 足球
    //赛程列表
    ul
      li(v-for="(item,index) in schedule" :key=index)
        //主队
        div.home-team
          img(:src='item.homeTeamImg').home-team-logo
          p {{item.homeTeam}}
        //时间
        div.schedule-time
          p NBA
          span.time {{item.time}}
          //比分
          span {{item.score}}
          p
            a(href="#").TV 视频{{item.TV}}
        //客队
        div.visiting-team
          img(:src="item.visitingTeamImg").visiting-team-logo
          p {{item.visitingTeam}}
</template>

<script>
export default {
  name: 'schedule',
  data () {
    return {
      check: 1,
      schedule: []
    }
  },
  methods: {},
  mounted () {
    this.$http.get('https://www.easy-mock.com/mock/5afda4e3c088691e06a6ab69/BaiDu-Vue/schedule').then((s) => {
      this.schedule = s.data.data.schedule
      console.log(this.schedule)
    })
  }
}
</script>

<style scoped lang="stylus">
  .schedule
    .schedule-title
      width 290px
      border-bottom 1px solid #999
      span
        font-size 14px
        width 50px
        height 30px
        line-height 30px
        display: inline-block
        text-align center
        cursor pointer
      .check-title
        font-weight bold
        border-bottom 1px solid red
    ul
      list-style-type none
      li
        display flex
        justify-content space-between
        border-bottom 1px solid #ddd
        margin-top 10px
        padding 15px 10px
        font-size 13px
        text-align center
        &:last-child
          border-bottom none
        .home-team
          width 65px
          height 50px
          .home-team-logo
            width 30px
            height 30px
            display inline-block
        .schedule-time
          text-align center
          .TV
            text-decoration none
            color blue
        .visiting-team
          width 65px
          height 50px
          .visiting-team-logo
            display inline-block
            width 30px
            height 30px
</style>
